import 'package:flutter/material.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:oramemo/common/res/gaps.dart';
import 'package:oramemo/common/styles/colors.dart';
import 'package:oramemo/generated/assets.dart';
import '../models/user.dart';
import 'package:oramemo/common/langs/text_key.dart';

class UserCard extends StatelessWidget {
  final User user;
  final VoidCallback onEdit;
  final VoidCallback onDelete;

  const UserCard({
    super.key,
    required this.user,
    required this.onEdit,
    required this.onDelete,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 13),
      padding: const EdgeInsets.fromLTRB(16, 11, 16, 12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CircleAvatar(
                radius: 25,
                backgroundColor: Colors.grey[200],
                backgroundImage:  const AssetImage(Assets.imagesHead),
                foregroundImage: NetworkImage(user.avatarUrl),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Gaps.vGap4,
                    Row(
                      children: [
                        Expanded(
                          child: Text(
                            user.name,
                            style: const TextStyle(
                              fontSize: 16,
                              color: Colours.dark_text_gray,
                            ),
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 8,
                            vertical: 4,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.blue[50],
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text(
                            user.role,
                            style: const TextStyle(
                              color: Colors.blue,
                              fontSize: 12,
                            ),
                          ),
                        ),
                      ],
                    ),
                    Gaps.vGap5,
                    Text(
                      '${TextKey.userCardPhoneLabel.tr}${user.phone}',
                      style: const TextStyle(
                        color: Colours.dark_text_gray,
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 2),
            ],
          ),
          Gaps.vGap15,
          Row(
            children: [
              Expanded(
                child: Text(
                  'ID: ${user.id}',
                  style: const TextStyle(
                    color: Colours.dark_text_gray,
                    fontSize: 16,
                  ),
                ),
              ),
              OutlinedButton(
                onPressed: onEdit,
                style: OutlinedButton.styleFrom(
                  side: const BorderSide(color: Colours.text_gray_c),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(6.0),
                  ),
                ),
                child: Text(
                  TextKey.userCardEdit.tr,
                  style: const TextStyle(color: Colours.text),
                ),
              ),
              const SizedBox(width: 13),
              OutlinedButton(
                onPressed: onDelete,
                style: OutlinedButton.styleFrom(
                  side: const BorderSide(color: Colours.red),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(6.0),
                  ),
                ),
                child: Text(
                  TextKey.userCardDelete.tr,
                  style: const TextStyle(color: Colours.red),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
